
import { Card,Pagination ,Row,Col } from 'antd';
import equal from "deep-equal"
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

class ViewContacter extends React.Component{
    constructor(props) {
		super(props);
        this.state={
            page:1
        }
    }
    shouldComponentUpdate(nextProps,nextState) {
        if(!equal(this.props.data, nextProps.data)){
            this.setState({page:1})
        }
        return  !equal(this.props.data, nextProps.data)||
        !equal(this.state.page,nextState.page)||
        !equal(this.props.total,nextProps.total);
    }
    render(){
        const {page} = this.state;
        const {data,total} = this.props;
        return (
            <div className="crm-view-contacter">
                {this.getCards(page)}
                {
                    data.length>0 ?
                    <div ><Pagination defaultCurrent={1}  total={total} pageSize={30}
                    showTotal={total => getLabel(18609,"共")+total+getLabel(18256,"条")} onChange={this.changePageSize}/></div>
                    :<div className="crm-no-datas-show">{getLabel(82090,"无匹配的结果！")}</div>
                }
            </div>
        )
    }
    getCards(page){
        const {data} = this.props;
        let cards = [];
        data.map((item,index)=>{
            if(index>=(30*Number(page)-30) && index<= (30*Number(page)-1)){
                 cards.push( 
                    <Card  title={<Row>
                        <Col span={12} style={{overflow:"hidden",textOverflow:"ellipsis"}} ><span className="card-name" title={item.firstname} dangerouslySetInnerHTML={{__html:item.firstnameLink}}></span><span className="card-call">{item.titleName}</span></Col>
                        <Col span={12}><i className="icon-coms-crm" /><span className="card-call">{item.jobtitle}</span></Col>
                    </Row>} 
                     extra={<span  onClick={()=>openFullWindowForXtable('/spa/crm/static/index.html#/main/crm/contacterView?type=2&contacterId='+item.contacterid)} title={getLabel(84283,"工作轨迹")} style={{fontSize:"16px",color:"#2db7f5"}}><i className="icon-coms-task-list" /></span>} className="view-contacter-card">
                    <Row>
                        <Col span={12}>{getLabel(620,"移动电话")}:{item.mobilephone}</Col>
                        <Col span={12}>{getLabel(84386,"电子邮箱")}:{item.email}</Col>
                    </Row>
                    <Row>
                        <Col span={12}>{getLabel(15713,"办公电话")}:{item.phoneoffice}</Col>
                        <Col span={12}>IM{getLabel(403,"号码")}:{item.imcode}</Col>
                    </Row>
                    <div className="clear"></div>
                </Card>)
            }
        });
        return cards;
    }
    changePageSize=(page)=>{
        this.setState({page:page});
        typeof this.props.pageChange == "function" && this.props.pageChange(page);

    }
}

export default ViewContacter;